<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: ExecCommands</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: ExecCommands</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>Creating and using custom ExecCommands.</p>
</div>

<div class="example">
    <style>
    #editor_cont {
        width: 600px;
        border: 1px solid #999;
        margin: 2em;
        background-color: #f2f2f2;
    }
    #editor {
        height: 265px;
        background-color: #fff;
    }
    #buttons, #out {
        padding: 10px;
    }
    #buttons {
        border-bottom: 1px solid #999;
    }
    #out {
        font-weight: bold;
        border-top: 1px solid #999;
    }


</style>

<p>Clicking on one of the buttons below will execute a custom <code>execCommand</code> on the Editor.</p>

<div id="editor_cont">
    <div id="buttons">
        <button id="foo">Foo Command</button>
        <button id="bar">Bar Command</button>
        <button id="baz">Baz Command</button>
    </div>
    <div id="editor"></div>
    <div id="out">&nbsp;</div>    
</div>



<script>
YUI().use('editor', function(Y) {

    var logFn = function(str) {
        Y.one('#out').set('innerHTML', str);
    };

    //Create the Base Editor
    var editor = new Y.EditorBase({
        content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>',
        extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
    });

    //Mixin the new commands
    Y.mix(Y.Plugin.ExecCommand.COMMANDS, {
        foo: function(cmd, val) {
            logFn('You clicked on Foo');
            var inst = this.getInstance();
            inst.one('body').setStyle('backgroundColor', 'yellow');
        },
        bar: function(cmd, val) {
            logFn('You clicked on Bar');
            var inst = this.getInstance();
            inst.one('body').setStyle('backgroundColor', 'green');
        },
        baz: function(cmd, val) {
            logFn('You clicked on Baz');
            var inst = this.getInstance();
            inst.one('body').setStyle('backgroundColor', 'blue');
        }
    });
    
    
    //Rendering the Editor.
    editor.render('#editor');

    Y.delegate('click', function(e) {
        editor.execCommand(e.target.get('id'));
    }, '#buttons', 'button');
});


</script>

</div>

<h3 id="working-with-editorbase">Working with EditorBase</h3>
<p><code>EditorBase</code> is not a fully functional Editor, it is simply the base utility that will be used under the hood to create an Editor.</p>

<h3 id="creating-the-editor">Creating the Editor</h3>
<p>In this step we are going to do the initial render of the Editor, set its content, and focus it when it's ready.</p>

<pre class="code prettyprint">YUI().use(&#x27;editor&#x27;, function(Y) {

    &#x2F;&#x2F;Create the Base Editor
    var editor = new Y.EditorBase({
        content: &#x27;&lt;p&gt;&lt;b&gt;This is &lt;i class=&quot;foo&quot;&gt;a test&lt;&#x2F;i&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&lt;p&gt;&lt;b style=&quot;color: red; font-family: Comic Sans MS&quot;&gt;This is &lt;span class=&quot;foo&quot;&gt;a test&lt;&#x2F;span&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&#x27;,
        extracss: &#x27;.foo { font-weight: normal; color: black; background-color: yellow; }&#x27;
    });
    
    &#x2F;&#x2F;Rendering the Editor.
    editor.render(&#x27;#editor&#x27;);

});</pre>


<h3 id="registering-a-new-execcommand">Registering a new execCommand</h3>

<p>ExecCommand overrides are stored on the <code>execCommand</code> plugin. This way, you can write a plugin for Editor and have it available
to all Editor instances in your sandbox.</p>

<p>To create a new execCommand, we simply add an object literal to the <code>Y.Plugin.ExecCommand.COMMANDS</code> static object like this:</p>

<pre class="code prettyprint">Y.mix(Y.Plugin.ExecCommand.COMMANDS, {
    foo: function(cmd, val) {
        logFn(&#x27;You clicked on Foo&#x27;);
        var inst = this.getInstance();
        inst.one(&#x27;body&#x27;).setStyle(&#x27;backgroundColor&#x27;, &#x27;yellow&#x27;);
    }
});</pre>


<p>Now we can use this new command like:</p>

<pre class="code prettyprint">editor.execCommand(&#x27;foo&#x27;);</pre>



<h3 id="full-example-source">Full Example Source</h3>

<h4 id="html">HTML</h4>
<pre class="code prettyprint">&lt;p&gt;Clicking on one of the buttons below will execute a custom &lt;code&gt;execCommand&lt;&#x2F;code&gt; on the Editor.&lt;&#x2F;p&gt;

&lt;div id=&quot;editor_cont&quot;&gt;
    &lt;div id=&quot;buttons&quot;&gt;
        &lt;button id=&quot;foo&quot;&gt;Foo Command&lt;&#x2F;button&gt;
        &lt;button id=&quot;bar&quot;&gt;Bar Command&lt;&#x2F;button&gt;
        &lt;button id=&quot;baz&quot;&gt;Baz Command&lt;&#x2F;button&gt;
    &lt;&#x2F;div&gt;
    &lt;div id=&quot;editor&quot;&gt;&lt;&#x2F;div&gt;
    &lt;div id=&quot;out&quot;&gt;&amp;nbsp;&lt;&#x2F;div&gt;    
&lt;&#x2F;div&gt;</pre>


<h4 id="css">CSS</h4>
<pre class="code prettyprint">#editor_cont {
    width: 600px;
    border: 1px solid #999;
    margin: 2em;
    background-color: #f2f2f2;
}
#editor {
    height: 265px;
    background-color: #fff;
}
#buttons, #out {
    padding: 10px;
}
#buttons {
    border-bottom: 1px solid #999;
}
#out {
    font-weight: bold;
    border-top: 1px solid #999;
}</pre>



<h4 id="javascript">Javascript</h4>
<pre class="code prettyprint">YUI().use(&#x27;editor&#x27;, function(Y) {

    var logFn = function(str) {
        Y.one(&#x27;#out&#x27;).set(&#x27;innerHTML&#x27;, str);
    };

    &#x2F;&#x2F;Create the Base Editor
    var editor = new Y.EditorBase({
        content: &#x27;&lt;p&gt;&lt;b&gt;This is &lt;i class=&quot;foo&quot;&gt;a test&lt;&#x2F;i&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&lt;p&gt;&lt;b style=&quot;color: red; font-family: Comic Sans MS&quot;&gt;This is &lt;span class=&quot;foo&quot;&gt;a test&lt;&#x2F;span&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&#x27;,
        extracss: &#x27;.foo { font-weight: normal; color: black; background-color: yellow; }&#x27;
    });

    &#x2F;&#x2F;Mixin the new commands
    Y.mix(Y.Plugin.ExecCommand.COMMANDS, {
        foo: function(cmd, val) {
            logFn(&#x27;You clicked on Foo&#x27;);
            var inst = this.getInstance();
            inst.one(&#x27;body&#x27;).setStyle(&#x27;backgroundColor&#x27;, &#x27;yellow&#x27;);
        },
        bar: function(cmd, val) {
            logFn(&#x27;You clicked on Bar&#x27;);
            var inst = this.getInstance();
            inst.one(&#x27;body&#x27;).setStyle(&#x27;backgroundColor&#x27;, &#x27;green&#x27;);
        },
        baz: function(cmd, val) {
            logFn(&#x27;You clicked on Baz&#x27;);
            var inst = this.getInstance();
            inst.one(&#x27;body&#x27;).setStyle(&#x27;backgroundColor&#x27;, &#x27;blue&#x27;);
        }
    });
    
    
    &#x2F;&#x2F;Rendering the Editor.
    editor.render(&#x27;#editor&#x27;);

    Y.delegate(&#x27;click&#x27;, function(e) {
        editor.execCommand(e.target.get(&#x27;id&#x27;));
    }, &#x27;#buttons&#x27;, &#x27;button&#x27;);
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#working-with-editorbase">Working with EditorBase</a>
</li>
<li>
<a href="#creating-the-editor">Creating the Editor</a>
</li>
<li>
<a href="#registering-a-new-execcommand">Registering a new execCommand</a>
</li>
<li>
<a href="#full-example-source">Full Example Source</a>
<ul class="toc">
<li>
<a href="#html">HTML</a>
</li>
<li>
<a href="#css">CSS</a>
</li>
<li>
<a href="#javascript">Javascript</a>
</li>
</ul>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Use the Editor&#x27;s instance to query the iframe">
                                        <a href="editor-instance.html">Using the Editor&#x27;s instance</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using the Editor&#x27;s built in events.">
                                        <a href="editor-events.html">Editor Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using the Editor&#x27;s nodeChange Event.">
                                        <a href="editor-nodechange.html">NodeChange Event</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating and using your own ExecCommands">
                                        <a href="editor-exec.html">ExecCommands</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
